<template>
	
	<view class="page">
		<view class="cover" @click="hideMask()"  v-if ="istan">
				<image src="/static/img/fshare.png" ></image>
		</view>
		<Authority v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='authorityFun'></Authority>
		<goods-size v-if="goodsSizePopup" :size="goodsSize" :colorList="colorList" :sizeList="sizeList" :standardValue="standardValue"
		 :goodsPrice="goodsDetailList" :b_id="b_id" :imgUrl="imgUrl" :bizpro_name="bizpro_name" :bizpro_number="bizpro_number"
		 :bizpro_lable="bizpro_lable" :supplier_id="supplier_id" :type1='typeId1' :type2='typeId2' ></goods-size>
		<goods-param-popup v-if="goodsParamPopup" :params="goodsParams" :goodsPrice="goodsDetailList"></goods-param-popup>
		<swiper autoplay  circular interval="2000">
			<swiper-item v-for="(item,index) in detailSwiperList" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="goods-info" v-for="(item,index) in goodsDetailList" :key="index">
			<text class="goods-name">{{item.b_name}}</text>
			<view class="share">
				<image src="/static/img/goods-share%20.png"></image>
				<text @click="share">分享</text>
			</view>
			<view class="tagmain">
				<text class="tag" v-for="(lb,i) in item.label " :key='i'>{{lb}}</text>
			</view>
			<text class="price">{{chooseGoods.choosed?'￥'+chooseGoods.price:price_area}}</text>
			<text class="high-price">原价：{{item.old_price}}</text>
			<text class="sell-count">销量：{{item.fake_num}}件</text>
			<text class="send">{{item.express_price}}</text>
		</view>
		<view class="goods-param">
			<text class="param">商品参数</text>
			<view class="line"></view>
			<view class="csmain">
				<view class="csmain1" v-for="(param,index_param) in goodsParams" :key="index_param" v-if="index_param<3">
					<view class="csmain2"></view>
					<view class="csmain3">
						<text class="weight"><text style="">{{param.title}}</text>:{{param.params}}</text>
					</view>
				</view>
			</view>
			<text class="select" @click="clickCheck">点击查看</text>
			<image src="/static/img/right-arrow.png" class="right-arrow"></image>
		</view>
		<view class="goods-size" @click="goodsSizeClick">
			<text class="left">商品规格</text>
			<view class="right">
				<text>{{chooseGoods.choosed?chooseGoods.type1+chooseGoods.type2:'请选择商品规格'}}</text>
				<image src="/static/img/right-arrow.png"></image>
			</view>
		</view>
		<view class="goods-detail-wrap">
			<view class="goods-top">
				<image src="/static/img/bubble.png"></image>
				<text class="detail-content">商 · 品 · 详 · 情</text>
			</view>
			<rich-text :nodes="this.detail" class="agreement-content"></rich-text>
		</view>
		<view class="price-show">
			<text>价格说明：</text></br></br>
			<text>· 划线价格</br>
				商品的市场价、零售价、指导价或该商品曾经展示过的销售价格等，并非原价，仅供参考。</br></br>
				·未划线价格</br>
				商品的实际价格，不因表述的差异改变性质。具体成交价格根据商品参与活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</br></br>
				·商品详情页（含主图）</br>以图片或文字形式标注的促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情况下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。</text>
		</view>
		<view style="height: 190rpx;"></view>
		<view class="bottom">
			<text class="total-price">{{chooseGoods.choosed?'￥'+chooseGoods.price:price_area}}</text>
			<view class="cart-wrap">
				<view class="add-cart" @click="addCart()">
					<text>加入购物车</text>
				</view>
				<!-- <view class="buy" v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='authorityFun'>
					<text >立即购买</text>
				</view> -->
				<view class="buy"  @click="toOrderConfirm">
					<text>立即购买</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const headers = {}
	import {request} from '../../request/index.js';
	import GoodsParamPopup from '@/components/GoodsParamPopup';
	import GoodsSize from '@/components/GoodsSize';
	import ComHeader from '@/components/ComHeader';
	import Authority from '@/components/authorityPopup.vue'
	export default {
		onLoad: function(options) {
		
			this.id = options.id;
		
			this.getGoodsDetail();
			this.getDetailSwiperList();
			this.getGoodsParams();
			this.getGoodsSize();
			
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/goods/GoodsDetail?id='+this.id)
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
		},
		data() {
			return {
				goodsSizePopup: false,
				goodsParamPopup: false,
				goodsDetailList: [],
				id: '',
				detailSwiperList: [],
				goodsParams: [],
				goodsPrice: 0,
				bizpro_name:'',
				goodsSize: {},
				colorList: [],
				sizeList: [],
				bizpro_lable:[],
				standardValue: [],
				b_id: '',
				imgUrl: '',
				b_name: '',
				bizpro_number: '',
				label: '',
				supplier_id: '',
				bizpro_spec_value: '',
				detail: '',
				price_area:'',
				typeId1:999,
				typeId2:999,
				count:1,
				chooseGoods:{
					choosed:false,
					price:'',
					type1:'',
					type2:''
				},
				showAuthority:false ,//微信是否授权状态 默认否
				appId:'wx91063cc93c2cffbf',
				istan:false//分享状态
				

			}
		},
		components: {
			GoodsSize,
			GoodsParamPopup,
			ComHeader,
			Authority
		},
		methods: {
		
			//点击分享弹窗
			
			//弹窗图片 消失
			hideMask(){
				this.istan = false
			},
					
		
			clickCheck() {
				this.goodsParamPopup = !this.goodsParamPopup;
			},
			closeGoodsParamPopup() {
				this.goodsParamPopup = false;
			},
			share() {
				this.istan=true
				/* uni.navigateTo({
					url: '/pages/my/ShareApp'
				}) */
			},
			closeGoodsSizePopup() {
				
				
				this.goodsSizePopup = false;
			},
			goodsSizeClick() {
				this.goodsSizePopup = !this.goodsSizePopup;
			},
			toCart() {
				uni.switchTab({
					url: 'pages/cart/Cart'
				})
			},
			
			/**  
			 * 根据参数名 获取 URL 路径中的参数  
			 * @param {String} name 要读取的参数名称  
			 */  
			getUrlParam(){
				  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')  
				  let url = window.location.href.split('#')[0]   
				  let search = url.split('?')[1]  
				  if (search) {  
				    var r = search.substr(0).match(reg)  
				    if (r !== null) return unescape(r[2])  
				    return null  
				  } else {  
				    return null  
				  }  
			},
			//获取code
			getCode() {
				var code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				var local = this.$api.wxurl;  //这个地方是微信公众平台网页授权里面配置的域名，也是服务器的域名，把打包后的static和index放到webapps的文件夹下面。格式为域名+文件夹名称
				
				if (code == null || code === '') {
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
						'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect'
						
				} else {
					/* 调用后台接口 获取token  是否登录过App的状态 */
					this.$api.getMemeberInfo({code:code}).then(res => {
						
								
										
					})
				
				}
			},
			//立即购买 
			toOrderConfirm() {
				
				let token=uni.getStorageSync('token')

				if(this.colorList.length!=0&&this.typeId1==999){
					this.goodsSizeClick();
				
					return
				}
				if(this.sizeList.length!=0&&this.typeId2==999){
					this.goodsSizeClick();
				
					return
				}
				if(this.sizeList.length==0&&this.colorList.length==0){
					this.chooseGoods.price = this.price_area.replace('￥','')
				}
				
				
				let memberInfo = uni.getStorageSync('member')
				if(memberInfo==null||memberInfo==''||memberInfo.length==0){
					this.getCode()
					return
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''||typeof(memberInfo.phone)=='undefined'||memberInfo.phone==0){
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
						
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}
					
				}
				
			
				if(this.chooseGoods.choosed){
					var _index = this.typeId2
					if(_index == 999){
						_index = 0
					}
					this.$api.getCheckOrder({
						buy_num: this.count,
						price: this.chooseGoods.price,
						bizpro_imgurl: this.imgUrl,
						bizpro_name: this.bizpro_name,
						bizpro_number: this.bizpro_number,
						bizpro_lable: this.bizpro_lable,
						supplier_id: this.supplier_id,
						standard_value1: this.colorList[this.typeId1],
						standard_value2: this.sizeList[_index],
						bizpro_id: this.b_id,
						token:token,
					
					}).then(res => {
						uni.navigateTo({
							url: '/pages/order/OrderConfirm?order_id=' + res.data.orderId
						})
						
					})
					.catch(res => {
						console.log(res.errorCode);
						if(res.errorCode == 1015){
							this.getCode();
						}
					
						console.log(res);
					})
				}else{
					this.goodsSizeClick();
				}

				//获取用户缓存  没有 调微信授权 登录

			},
			// 获取商品详情的轮播图
			getDetailSwiperList() {
				this.$api.getDetailSwiperList({
					id: this.id
				}).then(res => {
					console.log(res,'5666666666666666666666666')
					this.detailSwiperList = res.data.data[0].banner;

				})
			},
			// 获取商品详情信息
			getGoodsDetail() {
				this.$api.getGoodsDetail({
					id: this.id
				}).then(res => {
					this.goodsDetailList = res.data.data;
					this.goodsPrice = res.data.data[0].sale_price;
					this.standardValue = res.data.data[0].standard_desc;
					this.b_id = this.goodsDetailList[0].b_id.toString();
					this.imgUrl = res.data.data[0].imgurl;
					this.bizpro_lable = res.data.data[0].label;
					this.supplier_id = res.data.data[0].supplier_id;
					this.bizpro_number = res.data.data[0].bizpro_number;
					this.bizpro_name = res.data.data[0].b_name;
					this.detail = res.data.data[0].detail;
					if(res.data.data[0].sale_price==res.data.data[0].sale_price_max)
					{
			         this.price_area="￥"+res.data.data[0].sale_price
					}else{
						this.price_area="￥"+res.data.data[0].sale_price+"-"+res.data.data[0].sale_price_max
					}
					
					
				})
			},

			// 获取商品参数
			getGoodsParams() {
				this.$api.getGoodsParams({
					id: this.id
				}).then(res => {
					this.goodsParams = res.data.data[0].param_arr;
			
					
				})
			},
			// 获取商品规格
			getGoodsSize() {
				this.$api.getGoodsSize({
					id: this.id
				}).then(res => {
					this.goodsSize = res.data.data;
					
					this.colorList = this.goodsSize[0].standard_base[1].value;
					if(this.goodsSize[0].standard_base[2]!=null){
						this.sizeList = this.goodsSize[0].standard_base[2].value;
					}
					
				})
			},
			// 点击底部加入购物车 弹出选择商品弹窗
			addCart() {
				if(this.colorList.length!=0&&this.typeId1==999){
					this.goodsSizeClick();
					return
				}
				if(this.sizeList.length!=0&&this.typeId2==999){
					this.goodsSizeClick();
					return
				}
				
				
				console.log(uni.getStorageSync('member'))
				let memberInfo = uni.getStorageSync('member')
				if(memberInfo==null||memberInfo==''||memberInfo.length==0){
					console.log(666)
					this.getCode()
					return
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''||typeof(memberInfo.phone)=='undefined'||memberInfo.phone==0){
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
						
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}
					
				}
				
				
				
				if(this.chooseGoods.choosed){
					var _index = this.typeId2
					if(_index == 999){
						_index = 0
					}
					this.$api.paramsToCart({
						bizpro_id: this.b_id,
						standard_value1: this.colorList[this.typeId1],
						standard_value2: this.sizeList[_index],
						buy_num: this.count,
						mark:'detail',
					}).then(res => {
						
						uni.showToast({
							title: '添加购物车成功'
						})
					})
					.catch(res => {
						console.log(res.errorCode);
						if(res.errorCode == 1015){
							this.getCode();
						}
					
					})
				}else{
					this.goodsSizeClick();
				}
				
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
	}

	swiper {
		width: 100%;
		height: 500rpx;
		margin-top: (--status-bar-height)
	}

	swiper image {
		width: 100%;
		height: 100%;
	}

	.goods-info {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 710rpx;
		min-height: 250rpx;
		height: auto;
		
		margin-left: 20rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 1);
		border-radius: 20rpx;
		margin-top: -50rpx;
	}

	.goods-name {
		margin-left: 30rpx;
		margin-top: 31rpx;
		width: 490rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.share {
		position: absolute;
		right: 24rpx;
		top: 25rpx;
		width: 85rpx;
		height: 49rpx;
	}

	.share image {
		width: 100%;
		height: 100%;
	}

	.share text {
		position: absolute;
		top: 4rpx;
		left: 15rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.tagmain {
		width: 650rpx;
		height: auto;
		float: left;
		margin-left: 30rpx;
		margin-top: 6px;
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		height: 28rpx;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
		margin-right: 8px;
		padding: 0px 8px;
		margin-bottom: 10rpx;
	}

	.tag-one {
		position: absolute;
		top: 133rpx;
		left: 41rpx;
	}

	.tag-two {
		position: absolute;
		left: 173rpx;
		top: 133rpx;
	}

	.price {
		margin-left: 31rpx;
		margin-top: 0;
		 width:500rpx; 
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.high-price {
		/* position: absolute; */
		margin-left: 40rpx;
		height: 40rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through;
	}

	.sell-count {
		position: absolute;
		right: 80rpx;
		bottom: 25rpx;
		width: 152rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.send {
		position: absolute;
		right: 35rpx;
		bottom: 25rpx;
		height: 22rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.goods-param {
		position: relative;
		width: 710rpx;
		height: 194rpx;
		margin-left: 20rpx;
	}

	.param {
		position: absolute;
		left: 39rpx;
		top: 43rpx;
		width: 29rpx;
		height: 118rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 30rpx;
	}

	.csmain {
		width: 400rpx;
		height: auto;
		float: left;
		/* background-color: red; */
		margin-left: 130rpx;
		margin-top: 24rpx;
	}

	.csmain1 {
		clear: left;
		float: left;
		position: relative;
		width: 100%;
	}

	.csmain2 {
		width: 18px;
		height: 18px;
		background: rgba(255, 226, 176, 1);
		border-radius: 100%;
		border-radius: 18px;
		float: left;
		margin-top: 6px;
		margin-left: -2px;
	}

	.csmain3 {
		position: absolute;
		width: 350rpx;
		height: 60rpx;
		z-index: 3;
		top: 0px;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.line {
		position: absolute;
		left: 98rpx;
		top: 40rpx;
		height: 124rpx;
		width: 2rpx;
		background: rgba(102, 102, 102, 1);
		border-radius: 1rpx;
	}

	.weight {
		width: 143rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.brand {
		position: absolute;
		left: 130rpx;
		top: 83rpx;
		width: 193rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.from {
		position: absolute;
		left: 130rpx;
		top: 129rpx;
		width: 208rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.select {
		position: absolute;
		right: 63rpx;
		bottom: 31rpx;
		width: 113rpx;
		height: 29rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254, 177, 71, 1);
	}

	.right-arrow {
		position: absolute;
		right: 30rpx;
		bottom: 23rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.goods-size {
		position: relative;
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(255, 252, 249, 1);
		border: 1rpx solid rgba(253, 149, 47, 1);
		border-radius: 10rpx;
		margin-left: 25rpx;
		margin-top: 32rpx;
		display: flex;
	}

	.goods-size .left {
		text-align: center;
		display: block;
		width: 176rpx;
		height: 100%;
		background: rgba(254, 177, 71, 1);
		border-radius: 10rpx 0 0 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		float: lef;
		color: rgba(255, 255, 255, 1);
	}

	.goods-size .right {
		width: 514rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-size .right text {
		/* position: absolute; */
		left: 197rpx;
		/* height: 20rpx; */
		width: 420rpx;
		font-size: 28rpx;
		margin-left: 15rpx;
		font-family: PingFang SC;
		font-weight: 500;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
		color: rgba(51, 51, 51, 1);
	}

	.goods-size .right image {
		/* position: absolute; */
		margin-right: 30rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.goods-detail-wrap {
		width: 710rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-top: 32rpx;
		border: 1rpx solid #eee;
		border-radius: 20rpx;
		padding-bottom: 30rpx;
	}

	.goods-top {
		position: relative;
		width: 690rpx;
		height: 108rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.goods-top image {
		width: 100%;
		height: 100%;
	}
	.agreement-content >>>p{
		padding: 0;
		margin-block-end: 0;
		margin-block-start: 0;
	}
	.agreement-content >>>img{
		display: block;
	}
	.detail-content {
		position: absolute;
		top: 28rpx;
		left: 202rpx;
		height: 37rpx;
		font-size: 38rpx;
		font-family: FandolHei;
		font-weight: bold;
		color: rgba(254, 177, 71, 1);
	}

	.goods-img {
		display: flex;
		flex-direction: column;
		width: 670rpx;
		height: 800rpx;
	}

	.goods-img image {
		width: 670rpx;
		height: 400rpx;
		margin-left: 10rpx;
	}

	.no-more {
		display: block;
		width: 100%;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin: 30rpx 280rpx;
	}

	.price-show {
		width: 650rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(179, 179, 179, 1);
		margin-left: 50rpx;
		margin-top: 48rpx;
		/* border: 1rpx solid #eee; */
		/* border-radius: 10rpx; */
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		/* box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(230,230,230,0.74); */
		border: 1rpx solid #eee;
		overflow: hidden;
		padding: 20rpx 0;
	}

	.total-price {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 77, 77, 1);
	}

	.cart-wrap {
		display: flex;
		width: 380rpx;
		height: 70rpx;
	}

	.add-cart {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 186rpx;
		height: 66rpx;
		border: 2rpx solid rgba(254, 177, 71, 1);
		border-radius: 35rpx 0rpx 0rpx 35rpx;
	}

	.add-cart text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.buy {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 190rpx;
		height: 70rpx;
		background: rgba(253, 149, 47, 1);
		border-radius: 0rpx 35rpx 35rpx 0rpx;
	}

	.buy text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 238, 238, 1);
	}
	.cover {
	position:fixed;
	left:0;
	top:0;
	opacity:.5;
	width:100%;
	height:100%;
	background:#000;
	z-index:998;
	/* pointer-events: none; //不能操作 */
	}
</style>
